<template>
  <div class="home">
    <div class="content">

      <div class="time-info left" id='box13'>
        <div id="first" style="width: 100%; height: 300px"></div>
      </div>
      <div class="right">
        <p class="title">成交情况数据</p>
        <ul>
          <li v-for="item in dealList">
            <div class="right-box">
              <span class="name">{{ item.name }}</span>
              <span class="phoneNum">{{ item.phone }}</span>
            </div>
            <span class="price">
              {{ item.price }}
            </span>
          </li>
        </ul>
      </div>
    </div>

    <div class="home-footer">
      <el-card class="time-info left">
        <div slot="header">
          <span fo class="title">渠道统计</span>
          <ViewBar></ViewBar>
        </div>
      </el-card>
      <el-card class="time-info right">
        <div slot="header" class="clearfix">
          <ViewLine></ViewLine>
        </div>
      </el-card>
    </div>
  </div>
</template>



<script>
import ViewLine from '../components/ViewLine.vue'
import ViewBar from '../components/ViewBar.vue'
import * as echarts from 'echarts'

import { getHomeList } from "@/api/index";


export default {
  name: "HomeView",
  components: {
    ViewLine,
    ViewBar
  },
  data() {
    return {
      orderData: {},
      dealList: [],
      chartsDom: null,
    }
  },
  mounted() {
    // 获取成交情况数据
    this.handleValid()

    var chartDom = document.getElementById('first');
    var myChart = echarts.init(chartDom);
    var option;
    this.initEchart()
    option && myChart.setOption(option);
  },

  methods: {

    // 获取成交情况数据
    async handleValid() {
      const _data = await getHomeList();
      this.dealList = _data.data[0].dealList
    },




    initEchart() {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        this.chartsDom != null &&
        this.chartsDom != '' &&
        this.chartsDom != undefined
      ) {
        this.chartsDom.dispose()
      }


      var chartDom = echarts.init(document.getElementById('first'));
      chartDom.setOption({
        title: {
          text: '当天销售转化率'
        },
        series: [
          {
            name: 'Expected',
            type: 'funnel',
            left: '10%',
            width: '80%',
            labelLine: {
              show: false
            },
            itemStyle: {
              opacity: 0.7
            },
            data: [
              { value: 25.5, name: '上门看车人数:225' },
              { value: 15, name: '最终销售数量:124' },
              { value: 30, name: '预约人数:326' },
              { value: 56.4, name: '渠道人数:875' }
            ]
          },
          {
            name: 'Actual',
            type: 'funnel',
            label: {
              position: 'inside',
              formatter: '{c}%',
              color: '#fff'
            },
            itemStyle: {
              opacity: 0.5,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: [
              { value: 14.5, name: 'Visit' },
              { value: 8, name: 'Inquiry' },
              { value: 21, name: 'Click' },
              { value: 56.4, name: 'Show' }
            ],
            z: 100
          }
        ]

      });

    }
  },

};

</script>

<style lang="less" scoped>
.home {
  min-width: calc(1000px);
  width: 100%;

  .content {
    display: flex;
    width: 100%;
    height: 320px;
    margin-bottom: 20px;
    box-sizing: border-box;


    .left {
      box-sizing: border-box;
      width: 48%;
      height: 340px;
      padding: 20px;
      margin-right: 2%;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border-radius: 4px;
    }

    .right {
      box-sizing: border-box;
      width: 48%;
      height: 340px;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border-radius: 4px;

      .title {
        display: inline;
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
        line-height: 20px;
      }

      ul {
        height: auto;
        margin: 0;
        margin-top: 10px;
        padding: 0;

        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 0 10px 5px;
          font-size: 14px;

          .right-box {
            span {
              padding-right: 10px;
            }
          }

          .price {
            color: red;
            padding-right: 20px;
          }
        }

      }


    }
  }

  .home-footer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 320px;
    box-sizing: border-box;
    margin-top: 50px;


    .left {
      width: 48%;
      height: 320px;
      margin-right: 2%;
      box-sizing: border-box;


      .title {
        display: inline;
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
        line-height: 20px;
      }

    }

    .right {
      width: 48%;
      height: 320px;
    }
  }
}





// .header {
//   display: flex;
//   padding-right: 30px;

//   .item {
//     flex: 1;
//     height: 100px;
//     padding: 10px;
//     background: #fff;
//     border-radius: 10px;
//     margin-left: 20px;
//     margin-right: 20px;
//     font-weight: bold;
//     color: #fff;
//     // text-align: center;
//     position: relative;

//     .num {
//       font-size: 22px;
//       margin: 10px;
//       color: #fff;
//     }

//     .bottom {
//       position: absolute;
//       border-top: 1px solid rgb(246, 245, 245);
//       padding: 10px 20px;
//       bottom: 0;
//       right: 0;
//       left: 0;
//       color: #fff;
//       font-weight: normal;
//     }
//   }

// }

// 图表

// .content {


//   // .time-info {
//   //   text-align: left;
//   //   line-height: 30px;
//   //   font-size: larger;
//   //   font-weight: bolder;
//   //   flex: 2;
//   //   background: #fff;
//   //   margin-right: 20px;
//   //   padding: 20px;
//   // }

//   // .area {
//   //   flex: 1;
//   //   background: #fff;
//   //   padding: 10px;
//   // }
// }

//内容

// .home-footer {
//   display: flex;
//   margin: 20px;
//   margin-bottom: 20px;

//   .time-info {
//     text-align: left;
//     line-height: 30px;
//     font-size: larger;
//     font-weight: bolder;
//     flex: 2;
//     background: #fff;
//     margin-right: 20px;
//     padding: 10px;
//   }

//   .item {

//     .el-col {
//       border-right: 1px solid #eee;

//     }

//     .el-col:last-child {
//       border-right: none;
//     }

//     .title {

//       font-size: 14px;
//     }
//   }
// }
</style>